import { Render } from "./Render";

/*
 * @Author: Snow
 * @Date: 2021-10-11 10:28:42
 * @Description: UI工具
 */
export class ToolUI{
    protected uiParam:any = {};
    protected webglLessonsUI:any;

    constructor(){
        this.webglLessonsUI = (window as any).webglLessonsUI;
    }

    protected initUITools():void{
        const gl = Render.GL;
        let translation = [200, 150];
        let scale = [1, 1];
        // Setup a ui.
        this.uiParam = {x:0};
        this.webglLessonsUI.setupSlider("#x", {value: translation[0], slide: this.onUpateSlide(this,"x"), max: gl.canvas.width });
        this.webglLessonsUI.setupSlider("#y", {value: translation[1], slide: this.onUpateSlide(this,"y"), max: gl.canvas.height});
        this.webglLessonsUI.setupSlider("#z", {value: 0, slide: this.onUpateSlide(this,"z"), max: 5, min:-5,step:0.01,precision:2});
        this.webglLessonsUI.setupSlider("#angle", {slide: this.onUpateSlide(this,"angle"), max: 360});
        this.webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: this.onUpateSlide(this,"scaleX"), min: -5, max: 5, step: 0.01, precision: 2});
        this.webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: this.onUpateSlide(this,"scaleY"), min: -5, max: 5, step: 0.01, precision: 2});
        this.createSlider("scaleZ",{value: scale[1], slide: this.onUpateSlide(this,"scaleZ"), min: -5, max: 5, step: 0.01, precision: 2})
    }

    protected createSlider(id:string,options:any):void{
        let div:Element = document.querySelector("#ui");
        let node = document.createElement("div")
        node.id = id
        div.appendChild(node);
        this.webglLessonsUI.setupSlider("#" + id, options);
    }
    

    protected onUpateSlide(thisObj:ToolUI,id:string):(evt:any,ui:any)=>any{
        return (evt:any,ui:any):any=>{
            thisObj.uiParam[id] = ui.value;
            //console.log(thisObj.uiParam);
        }
    }

    protected createTabel(name:string,des:string = null,checked:boolean = false):void{
        des = des || name;
        let ui:Element = document.querySelector("#ui");
        let table = document.querySelector("#table");
        let tbody = document.querySelector("#tbody");
        if(!table){
            table = document.createElement("table");
            tbody = document.createElement("tbody");
            table.appendChild(tbody);
            ui.appendChild(table);
            ($(table) as any).tableDnD({onDrop: (obj:any)=>{
                console.error("111" + obj);
            }});
        }

        let tr = document.createElement("tr");
        let td = document.createElement("td");
        let chk = document.createElement("input");
        chk.value = name;
        chk.type = "checkbox";
        chk.id = name;
        chk.checked = checked;
        chk.onchange = this.onTableChange(this,name);
        td.appendChild(chk);
        td.appendChild(document.createTextNode('≡ ' + des));
        tr.appendChild(td);
        tbody.appendChild(tr);
    }

    protected onTableChange(thisObj:ToolUI,name:string):(ui:Event)=>any{
        return (ui:Event):any=>{
            //console.log("onTableChange",ui);
            let checkbox = document.querySelector("#"+name) as HTMLInputElement;
            thisObj.uiParam[name] = checkbox.checked;
            console.log(thisObj.uiParam);
        }
    }
}